import React, { useState, useEffect } from 'react';
import styles from '../index.less';

type ModalProps = {
  onCancel: () => void;
  onSubmit: (value: string) => void;
  visible: boolean;
  value: string;
};

const Modal: React.FC<ModalProps> = (props) => {
  if (!props.visible) {
    return null;
  }

  const [value, setValue] = useState('');

  useEffect(() => {
    setValue(props.value);
  }, []);

  const handleInputChange = (e: any) => {
    let value = e.target.value;
    if (value.length > 20) {
      value = value.substr(0, 20);
    }
    setValue(value);
  };

  return (
    <div className={styles.modal}>
      <div className={styles.modalTitle}>请输入可配置方案</div>
      <div className={styles.modalContent}>
        <input
          placeholder="请输入，不超过20字"
          value={value}
          onChange={handleInputChange}
        ></input>
      </div>
      <div className={styles.modalFooter}>
        <div className={styles.modalBtn} onClick={props.onCancel}>
          取消
        </div>
        <div className={styles.modalBtn} onClick={() => props.onSubmit(value)}>
          确认
        </div>
      </div>
    </div>
  );
};

export default Modal;
